import { Component, Input } from '@angular/core';
import { coerceNumberProperty } from '@angular/cdk/coercion';

@Component({
  selector: 'mini-progress',
  template: `
    <apes-tooltip [apesTitle]="'目标值: ' + target + '%'">
        <div apes-tooltip class="target" [ngStyle]="{'left.%': target}">
            <span [ngStyle]="{'background-color': color}"></span>
            <span [ngStyle]="{'background-color': color}"></span>
        </div>
    </apes-tooltip>
    <div class="progress-wrap">
        <div class="progress" [ngStyle]="{'background-color': color, 'width.%': percent, 'height.px':strokeWidth}"></div>
    </div>
    `,
  styleUrls: ['mini-progress.component.scss']
})
export class MiniProgressComponent{
  @Input() color = '#1890FF';

  @Input()
  get target() { return this._target; }
  set target(value: any) {
    const a = coerceNumberProperty(value);
    this._target = Math.min(Math.max(coerceNumberProperty(value), 0), 100);
  }
  private _target: number;

  @Input()
  get strokeWidth() { return this._strokeWidth; }
  set strokeWidth(value: any) {
    this._strokeWidth = coerceNumberProperty(value);
  }
  private _strokeWidth: number;

  @Input()
  get percent() { return this._percent; }
  set percent(value: any) {
    this._percent = Math.min(Math.max(coerceNumberProperty(value), 0), 100);
  }
  private _percent: number;

  // endregion
}
